<template>
  <div class="index-box">
    <div class="container">
      <van-swipe class="swipe">
        <van-swipe-item
          v-for="(item, index) in images"
          :key="index"
          class="swipe-item"
        >
          <img
            :src="item.img"
            @click="clickSwipe"
            :data-index="index"
          >
        </van-swipe-item>
      </van-swipe>
      <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
        <!-- 本周热门 -->
        <section class="section-hot">
          <div class="hot-title">
            <span>-</span> 本周热门 <span>-</span>
          </div>
          <div class="hot-title-en">HOT SEARCH</div>
          <div class="hot-content">
            <div
              v-for="(item, index) in hotData"
              :key="index"
              @click="clickHotToDetail(index)"
              class="hot-item">
              <img :src="item.logo">
              <p>{{ item.name }}</p>
            </div>
          </div>
        </section>
        <section
          class="section-container"
          v-for="(item, index) in listData"
          :key="index"
        >
          <van-row class="section-title">
            <van-col span="4" class="section-icon">
              <img src="static/img/rdclass.jpg">
            </van-col>
            <van-col offset="1" span="19">{{ item.title }}</van-col>
          </van-row>
          <div class="section-content">
            <div
              class="section-child"
              v-for="(childItem, childIndex) in item.list"
              :key="childIndex"
            >
              <van-row
                class="section-item"
                v-for="(listItem, listIndex) in childItem"
                :key="listIndex"
                @click.native="clickJumpToDetail(childIndex, listIndex, index)"
              >
                <van-col class="section-item-left" span="6">
                  <div class="section-img">
                    <img :src="listItem.logo">
                  </div>
                </van-col>
                <van-col span="14" style="padding: 0 10px;">
                  <p class="section-item-title">{{ listItem.name }}</p>
                  <p
                    class="section-item-desc"
                  >{{ listItem.short_desc }}</p>
                  <!-- <p class="section-item-label">
                    <span>{{ listItem.label }}</span>
                  </p> -->
                </van-col>
                <van-col span="4" style="text-slign: right;">
                  <van-button
                    class="section-btn"
                    @click.stop="downLoadApk(listItem.ios_url,listItem.android_url)"
                  >访问</van-button>
                </van-col>
              </van-row>
            </div>
          </div>

          <!-- 入门必备  - 放在钱包上面  -->
          <section v-if="index == 2" class="section-hot">
            <div class="hot-title">
              <span>-</span> 入门必备 <span>-</span>
            </div>
            <div class="hot-title-en">NECESSARY</div>
            <div class="hot-content">
              <div
                v-for="(item, index) in necessaryData"
                :key="index"
                @click="clickNecessaryToDetail(index)"
                class="hot-item">
                <img :src="item.logo">
                <p>{{ item.name }}</p>
              </div>
            </div>
          </section>
        </section>
      </van-pull-refresh>
      <!-- 点击banner的弹出框 -->
      <van-popup
        v-model="showPop"
        v-if="showPop"
        position="left"
        :overlay="false"
        class="pop-container"
      >
        <van-nav-bar
          title=""
          left-arrow
          @click-left="onClickLeft"
        />
        <img
          :src="popData.img"
          class="pop-img"
        >
        <div class="pop-content">
          <span v-html="popData.desc">
            {{ popData.desc }}
          </span>
        </div>
      </van-popup>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      showPop: false,
      swipeIndex: 0,
      popData: {},
      images: [],
      isLoading: false,
      listData: [{
        title: '最新上架',
        list: []
      }, {
        title: '交易所',
        list: []
      }, {
        title: '钱包',
        list: []
      }, {
        title: '新闻资讯',
        list: []
      }, {
        title: '行情软件',
        list: []
      }],
      hotData:[],
      necessaryData: []
    }
  },
  mounted() {
    // 设置tabbar的active
    active_g = 0

    this.$axios({
      method: 'GET',
      url: url_g + '/banner/',
    }).then((res) => {
      if(res.data) {
        this.images = res.data.results
      }
    }).catch((e) => {
      console.error('GET err:' + e);
    });
    // 获取最新上架数据
    this.getNewData()
    // 获取交易所
    this.getExchangeData()
    // 获取钱包
    this.getWalletData()
    // 获取新闻资讯
    this.getNewsData()
    // 获取行情软件
    this.getSoftwareData()
    // 获取本周热门
    this.getHotData()
    // 获取热门必备
    this.getNecessaryData()
  },
  methods: {
    downLoadApk(iosUrl,androidUrl) {
    	if(this.andOrIos()) { //android
      	if(sessionStorage.getItem("usermessage")){
        	window.open(androidUrl)
      	}else{
      		this.$router.push("/login")
  			}
      }else{
        if(sessionStorage.getItem("usermessage")){
        	window.open(iosUrl)
      	}else{
      		this.$router.push("/login")
  			}
      }
    },
    clickJumpToDetail(childIndex, listIndex, index) {
      let appInfo = this.listData[index].list[childIndex][listIndex]
      this.$router.push({
        path: '/detail'
      })
      sessionStorage.setItem("appInfo", JSON.stringify(appInfo))
    },
    clickHotToDetail(index) {
      let appInfo = this.hotData[index]
      this.$router.push({
        path: '/detail'
      })
      sessionStorage.setItem("appInfo", JSON.stringify(appInfo))
    },
    clickNecessaryToDetail(index) {
      let appInfo = this.necessaryData[index]
      this.$router.push({
        path: '/detail'
      })
      sessionStorage.setItem("appInfo", JSON.stringify(appInfo))
    },
    clickSwipe(e) {
      let index = e.target.dataset.index
      this.popData = this.images[index]
      this.showPop = true
    },
    onClickLeft() {
      this.showPop = false
    },
    onRefresh() {
      // 获取最新上架数据
      this.getNewData()
      // 获取交易所
      this.getExchangeData()
      // 获取钱包
      this.getWalletData()
      // 获取新闻资讯
      this.getNewsData()
      // 获取行情软件
      this.getSoftwareData()
      // 获取本周热门
      this.getHotData()
      // 获取热门必备
      this.getNecessaryData()

      setTimeout(() => {
        this.isLoading = false
      }, 500);
    },
    getNewData() {
      this.$axios({
        method: 'GET',
        url: url_g + '/app/',
        params: {ordering: 'st_new'}
      }).then((res) => {
        if(res.data) {
          let newData = res.data.results
          let arr = []
          this.listData[0].list = []
          // 将newData 每三个为一个数组
          // for(let i = 0, len = newData.length; i < len; i ++) {
          for(let i = 0, len = 9; i < len; i ++) {
            if( (i + 1) % 3 == 0 ) {
              arr.push(newData[i])
              this.listData[0].list.push(arr)
              arr = []
            } else {
              arr.push(newData[i])
            }

            // if(i == len - 1) {
            //   this.listData[0].list.push(arr)
            // }
          }
        }
      }).catch((e) => {
        console.error('GET err:' + e);
      });
    },
    getExchangeData() {
      this.$axios({
        method: 'GET',
        url: url_g + '/app/',
        params: {category: '01'}
      }).then((res) => {
        if(res.data) {
          let newData = res.data.results
          let arr = []
          this.listData[1].list = []
          // 将newData 每三个为一个数组
          for(let i = 0, len = 9; i < len; i ++) {
            if( (i + 1) % 3 == 0 ) {
              arr.push(newData[i])
              this.listData[1].list.push(arr)
              arr = []
            } else {
              arr.push(newData[i])
            }
          }
        }
      }).catch((e) => {
        console.error('GET err:' + e);
      });
    },
    getWalletData() {
      this.$axios({
        method: 'GET',
        url: url_g + '/app/',
        params: {category: '02'}
      }).then((res) => {
        if(res.data) {
          let newData = res.data.results
          let arr = []
          this.listData[2].list = []
          // 将newData 每三个为一个数组
          for(let i = 0, len = 9; i < len; i ++) {
            if( (i + 1) % 3 == 0 ) {
              arr.push(newData[i])
              this.listData[2].list.push(arr)
              arr = []
            } else {
              arr.push(newData[i])
            }
          }
        }
      }).catch((e) => {
        console.error('GET err:' + e);
      });
    },
    getNewsData() {
      this.$axios({
        method: 'GET',
        url: url_g + '/app/',
        params: {category: '05'}
      }).then((res) => {
        if(res.data) {
          let newData = res.data.results
          let arr = []
          this.listData[3].list = []
          // 将newData 每三个为一个数组
          for(let i = 0, len = 9; i < len; i ++) {
            if( (i + 1) % 3 == 0 ) {
              arr.push(newData[i])
              this.listData[3].list.push(arr)
              arr = []
            } else {
              arr.push(newData[i])
            }
          }
        }
      }).catch((e) => {
        console.error('GET err:' + e);
      });
    },
    getSoftwareData() {
      this.$axios({
        method: 'GET',
        url: url_g + '/app/',
        params: {category: '03'}
      }).then((res) => {
        if(res.data) {
          let newData = res.data.results
          let arr = []
          this.listData[4].list = []
          // 将newData 每三个为一个数组
          for(let i = 0, len = 9; i < len; i ++) {
            if( (i + 1) % 3 == 0 ) {
              arr.push(newData[i])
              this.listData[4].list.push(arr)
              arr = []
            } else {
              arr.push(newData[i])
            }
          }
        }
      }).catch((e) => {
        console.error('GET err:' + e);
      });
    },
    getHotData() {
      this.$axios({
        method: 'GET',
        url: url_g + '/app/',
        params: {is_hot: '1'}
      }).then((res) => {
        if(res.data) {
          this.hotData = res.data.results.slice(0, 9)
        }
      }).catch((e) => {
        console.error('GET err:' + e);
      });
    },
    getNecessaryData() {
      this.$axios({
        method: 'GET',
        url: url_g + '/app/',
        params: {is_necessary: '1'}
      }).then((res) => {
        if(res.data) {
          this.necessaryData = res.data.results.slice(0, 9)
        }
      }).catch((e) => {
        console.error('GET err:' + e);
      });
    },
    andOrIos() {
      let u = navigator.userAgent;
      let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
      let isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
      return isAndroid
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
p {
  margin: 0;
  font-size: 14px;
}
.index-box {
  width: 100%;
  height: 100vh;
  overflow: auto;
}
.container {
  width: 100%;
  padding-bottom: 50px;
}
.swipe {
  height: auto;
  min-height: 100px;
}
.swipe-item {
  width: 100%;
  overflow: hidden;
}
.swipe-item img {
  width: 100%;
}
.section-container {
  padding: 10px;
}
.section-title {
  display: flex;
  align-items: center;
  padding: 0 10px;
  height: 30px;
  line-height: 30px;
}
.section-icon {
  display: inline-block;
  height: 20px;
  width: 5px;
}
.section-icon img {
  height: 100%;
}
.section-content {
  width: 100%;
  height: 255px;
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap;
}
.section-child {
  display: inline-flex;
  flex-direction: column;
  width: 95%;
  height: 255px;
}
.section-item {
  display: flex;
  align-items: center;
  width: 100%;
  height: 85px;
}
.section-item-title {
  /*font-weight: bold;*/
  line-height: 24px;
  font-size: 16px;
}
.section-item-desc {
  color: #777;
  line-height: 20px;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 12px;
}
.section-item-label {
  margin-top: 5px;
}
.section-item-label span {
  padding: 2px 6px;
  border: 1px solid orange;
  border-radius: 15px;
  color: orange;
  font-size:12px;
  font-size:9.6px;
  -webkit-transform: scale(0.80);
}
.section-btn {
  border: 1px solid #529ec2;
  color: #529ec2;
  padding: 3px 14px;
  font-size: 12px;
  border-radius: 15px;
  line-height: 12px;
  height: 24px;
}
.section-item-left {
  padding: 5px;
}
.section-img {
  width: 65px;
  height: 65px;
  overflow: hidden;
  padding: 5px;
}
.section-img img {
  width: 100%;
  height: 100%;
  border-radius: 15px;
  box-shadow: 0px 2px 10px #dadada;
}
.pop-container {
  width: 100%;
  height: 100vh;
  overflow: auto;
}
.pop-img {
  width: 100%;
}
.pop-content {
  padding: 10px;
}
/*本周热门*/
.section-hot {
  padding: 10px 0;
  width: 100%;
}
.hot-title {
  text-align: center;
  font-weight: bold;
  font-size: 20px;
  margin-bottom: 5px;
}
.hot-title span {
  color: #529ec2;
}
.hot-title-en {
  text-align: center;
  color: #777;
  font-size: 12px;
}
.hot-content {
  height: 100px;
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap;
}
.hot-item {
  display: inline-block;
  width: 60px;
  text-align: center;
  padding: 10px;
}
.hot-item img {
  width: 100%;
  border-radius: 10px;
}
.hot-item p {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  font-size: 12px;
}
</style>
